<template>
  <div id="div1">
    <div id="div2">
        <eventClassification style="height:360px"></eventClassification>
        <networkLoad style="height:360px"></networkLoad>
        <coreSwitchPerformance style="height:360px"></coreSwitchPerformance>
    </div>
    <div id="div3">
        <faultStatistics style="height:1080px"></faultStatistics>
    </div>
    <div id="div4">
        <serverCpuUsage style="height:540px"></serverCpuUsage>
        <systemHealth style="height:540px"></systemHealth>
    </div>
  </div>
</template>
<script>
import networkLoad from './charts/NetworkLoad.vue';
import eventClassification from './charts/EventClassification.vue';
import serverCpuUsage from './charts/ServerCpuUsage.vue';
import systemHealth from './charts/SystemHealth.vue';
import coreSwitchPerformance from './charts/CoreSwitchPerformance.vue';
import faultStatistics from './charts/FaultStatistics.vue';


export default {
    components:{
        networkLoad,eventClassification,serverCpuUsage,systemHealth,coreSwitchPerformance,faultStatistics
    }
}
</script>

<style scoped>
#div1{
  width: 1920px;
  height: 1080px;
  background-color: black;
  /* overflow-y: scroll;
  overflow-x: scroll; */
}
#div2{
  float: left;
  width: 30%;
  height: 100%;
  background-color:blue;
}
#div3{
  float: left;
  width: 40%;
  height: 100%;
  background-color:brown;
}
#div4{
  float: left;
  width: 30%;
  height: 100%;
  background-color: darkgreen;
}
</style>
